// visualizer/src/components/FactorCard.js
import React from 'react';
import './FactorCard.css';

const FactorCard = ({ factor }) => {
  const healthPercent = (factor.health / factor.max_health) * 100;
  
  return (
    <div className={`factor-card ${factor.type.toLowerCase()}`}>
      <div className="factor-header">
        <h3>{factor.name}</h3>
        <span className="factor-level">Lv.{factor.level}</span>
      </div>
      <div className="factor-type">{factor.type}</div>
      <div className="factor-stats">
        <div className="stat">
          <span>HP: {factor.health.toFixed(0)}/{factor.max_health}</span>
          <div className="health-bar">
            <div 
              className="health-fill"
              style={{width: `${healthPercent}%`}}
            ></div>
          </div>
        </div>
        <div className="stat">攻击: {factor.attack.toFixed(1)}</div>
        <div className="stat">防御: {factor.defense.toFixed(1)}</div>
        <div className="stat">位置: ({factor.x.toFixed(1)}, {factor.y.toFixed(1)})</div>
      </div>
    </div>
  );
};

export default FactorCard;